<template>
	<view>
		<view class="letshouw">
			<u-icon name="list" size="38" @click="AccordingTheRight"></u-icon>
		</view>
		<u-popup v-model="show" border-radius="10">
			<view class="content">
				<view class="topclos"></view>
				<view class="shouimg">
					<u-avatar :src="src"></u-avatar>
					<view v-for="(item, index) in letnav" :key="index">
						<u-button plain :type="item.type" @click="dropOut(index, item.url)">
							<u-icon :name="item.icon"></u-icon>
							{{ item.title }}
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- <u-swipe-action :show="item.show" :index="index" :key="index" @open="open(index)" :options="options"  >
			<view class="item u-border-bottom" @click="MealCont(item)">
				<u-cell-group><u-cell-item icon="email" :title="item.theme" hover-class="cell-hover-class" :value="item.date" :label="item.theme"></u-cell-item></u-cell-group>
			</view>
		</u-swipe-action> -->
		<view class="mailbox">
			<view class="emal" v-for="(item, index) in MaelList" :key="index" @click="MealCont(item)">
				<view class="title">
					<view class="">
						{{ item.theme }}
					</view>
					<view>
						{{ item.date | getdatalis }}
					</view>
				</view>
				<view class="content">
					{{ item.sender | blanksplit }}

					<!-- 是，建安十年罚款是否能卡什么你发，什么呢·领导们是，建安十年罚款是否能卡什么你发，什么呢·领导们是，建安十年罚款是否能卡什么你发，什么呢·领导们 -->
				</view>
				<!-- v-html="mailboxfilt(item.dataCont)" -->
				<view class="content" :style="{ height: styhe(item.dataCont) }"> {{ item.text || item.dataCont}} </view>
			</view>
		</view>
		<loading v-if="MaelList.length === 0"></loading>
		<!-- <bottomNav :align="9623163546"></bottomNav> -->
		<!-- <loading v-if="MaelList.length === 0"></loading> -->
	</view>
</template>

<script>
	import {
		setState,
		getState
	} from '../../../store';
	// import bottomNav from '../../components/bottomNav/bottomNav.vue'
	export default {
		data() {
			return {
				letnav: [
					// { icon: 'file-text', type: 'primary', title: '收件', url: '' },
					// { icon: 'email', type: 'success', title: '已读', url: '' },
					{
						icon: 'edit-pen',
						type: 'warning',
						title: '发件',
						url: './page/sedMail'
					},
					// { icon: 'close-circle-fill', type: 'error', title: '删除', url: '' },
					// { icon: 'file-text', type: 'primary', title: '收件', url: '' },
					{
						icon: 'man-delete',
						type: 'custom-style',
						title: '退出',
						url: '../login/login'
					},
				],
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				title: '素胚勾勒出青花，笔锋浓转淡',
				subTitle: '2020-05-15',
				thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				MaelList: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				data: '2020-01-06 15:36',
				options: [{
						text: '收藏',
						style: {
							backgroundColor: '#007aff',
						},
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d',
						},
					},
				],
			};
		},
		onLoad() {
			uni.getStorage({
				key: 'userInfo',
				complete: ({
					data
				}) => {
					if (!data) this.GotoPage('../login/login');
				},

			});

			// MaelList数组为空的时候才从后端拿去数据
			this.MaelList.length > 1 || this.getReceiveMail();
			const {
				img
			} = getState('user', 'userInfo');

			this.src = img;
		},

		onHide(){
			this.show = false
		},
		methods: {
			mailboxfilt(data) {
				try {
					let JSONS = JSON.parse(data);

					return JSONS.textAsHtml || JSONS.html;
				} catch (e) {
					return data;
				}
			},
			styhe(data) {
				try {
					let JSONS = JSON.parse(data);
					let sends = (JSONS.html && '72rpx') || (JSONS.textAsHtml && '32rpx');
					return sends;
				} catch {

				}
			},
			dropOut(index, url) {
				this.GotoPage(url);
			},
			MealCont(data) {
				setState('Emali', 'EmailMessages', data);
				this.GotoPage('./page/particularsPage');
			},
			GotoPage(page) {
				uni.navigateTo({
					url: page,
				});
			},
			AccordingTheRight() {
				this.show = true;
			},
			// click(index, index1) {

			// if (index1 == 1) {
			// 	this.list.splice(index, 1);
			// 	this.$u.toast(`删除了第${index}个cell`);
			// } else {
			// 	this.list[index].show = false;
			// 	this.$u.toast(`收藏成功`);
			// }
			// },
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				// this.list[index].show = true;
				// this.list.map((val, idx) => {
				// 	if (index != idx) this.list[idx].show = false;
				// })
			},

			// 邮箱
			async getReceiveMail() {
				const res = await this.http(this.api.getMail, {});
				if (res) {
					this.MaelList = res;
				}
			},
		},
	};
</script>

<style scoped="scoped" lang="less">
	@import '../../../static/css/common.less';

	.mailbox {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll;
	}

	.emal {
		width: 100vw;
		height: auto;
		padding: 14rpx;
		border-radius: 12rpx;
		box-shadow: -20px -20px 10px #ced4dc03, 15px 7px 10px #efefefa6;

		.title {
			display: flex;

			:nth-child(1) {
				width: 78%;
				.txtOverflowHidden(65rpx);
				font-size: 36rpx;
				font-weight: 400;
			}

			:nth-child(2) {
				width: 22%;
			}
		}

		.content {
			width: 100%;
			.txtOverflowHidden(50rpx);
		}
	}

	.content {
		width: 10rem;
		height: 100vh;
	}

	.shouimg {
		text-align: center;
		margin-top: 2rem;
	}

	.topclos {
		width: 100%;
		height: 2rem;
		// background: red;
	}

	.wrap {
		padding: 24rpx;
	}

	.u-row {
		margin: 40rpx 0;
	}

	.demo-layout {
		height: 80rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.item {
		display: flex;
		padding: 20rpx;
	}

	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.title {
		text-align: left;
		font-size: 28rpx;
		// color: $u-content-color;
		margin-top: 20rpx;
	}

	.cell-hover-class {
		background-color: rgb(235, 237, 238);
	}

	/* 或者单是设置透明度 */
	.cell-hover-class {
		opacity: 0.5;
	}
</style>
